<template>
  <el-dialog :visible.sync="dialogFormVisible" :lock-scroll="false" :close-on-click-modal="false" title="选择角色" top="30px" width="1100px" @close="closeDialog()">
    <el-table ref="table" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column prop="id" label="ID" align="center" />
      <el-table-column prop="name" label="角色名" align="center" />
      <el-table-column prop="code" label="编码" align="center" />
      <el-table-column label="选择" width="80" align="center">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.isChecked" @change.native="choiceData(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-row class="pagination-container">
      <el-pagination :current-page="currentPage" :total="listCount" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
/* eslint-disable */
import { pagination } from '@/mixins/index'
export default {
  mixins: [pagination],
  data () {
    return {
      list: null,
      listCount: 1,
      listLoading: false,
      dialogFormVisible: false,
      dataList: [],
      uid: ''
    }
  },
  methods: {
    getData () {
      this.listLoading = true
      this.$http.request({
        url: `/user/role/${this.uid}`,

        tokenRefresh: () => this.getData()
      }).then(r => {
        this.$http.request({
          url: `/role/${this.page}/${this.limit}`,

          data: {}
        }).then(res => {
          const { list, total } = res.data
          this.list = list.map(l => {
            l.isChecked = r.roles.includes(l.code)
            return l
          })
          this.listCount = total
          this.listLoading = false
        })
      })
    },
    choiceData (row) {
      this.listLoading = true
      const data = { uid: this.uid, roleId: row.id }
      if (row.isChecked) {
        this.$http.request({
          method: 'post',
          url: `/user/authority/role`,

          data: JSON.stringify(data)
        }).then(() => {
          this.$message.success('分配成功')
          this.listLoading = false
        })
      } else {
        this.$http.request({
          method: 'delete',
          url: `/user/authority/role/${this.uid}/${row.id}`,

        }).then(() => {
          this.$message.success('删除成功')
          this.listLoading = false
        })
      }
    },
    closeDialog () {
      this.dataList = []
    }
  }
}
</script>
<style lang='scss' scoped>
  .dialog-footer {
    margin-top: 20px;
  }
</style>
